<template>
	<step-space
		:prev-disabled="!detailInfo.prevId"
		:next-disabled="!detailInfo.nextId"
		@prev="() => onRefresh(detailInfo.prevId)"
		@next="() => onRefresh(detailInfo.nextId)"
	/>

	<a-result v-if="result" status="404" title="404" sub-title="对不起，该客户已被回收。"> </a-result>
	<a-card v-if="loading">
		<div class="flex flex-row justify-between w-[100%]">
			<div class="flex-1">
				<div class="flex gap-4 mb-4">
					<!-- <a-image :width="80" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> -->
					<a-avatar shape="circle" :size="80">
						<template #icon><UserOutlined /></template>
					</a-avatar>
					<div class="py-2 flex flex-col justify-between">
						<div class="flex gap-3" style="margin-bottom: 20px">
							<span class="company-title">{{ detailInfo.customerName }}</span>
							<a-tag style="height: 24px; margin-right: 0">{{ followUpMap[detailInfo.followUpStatus] }}</a-tag>
							<a-tag style="height: 24px">{{ detailInfo.customerLevelName }}类客户</a-tag>
						</div>
						<div class="flex gap-5">
							<span class="text-gray-500">
								<span>跟进人</span>
								<span class="ml-[8px]">{{ detailInfo.followUpPerson || '-' }}</span>
							</span>
							<span class="text-gray-500">
								<span>最近跟进时间</span>
								<span class="ml-[8px]">{{ detailInfo.followUpTime || '-' }}</span>
							</span>
						</div>
						<div class="flex mt-[10px]">
							<span class="text-gray-500">
								<span>标签</span>
							</span>
							<span v-if="tagNameList.length" class="ml-[8px] mr-[30px]">
								<tag-list-space :list="tagNameList" :show-num="4" />
							</span>
							<el-space :size="2" class="ml-[10px] cursor-pointer">
								<el-icon size="20" color="#409eff">
									<el-icon-Edit />
								</el-icon>
								<el-text class="mx-1" type="primary" @click="onTagAdd">打标签</el-text>
							</el-space>
						</div>
					</div>
				</div>
				<a-space :size="4">
					<a-button v-if="hasPerm('bizPurposeDetailFollowIn')" @click="followVisible = true" class="action-button"
						>添加跟进</a-button
					>
					<a-button v-if="hasPerm('bizPurposeDetailEdit')" @click="editCustomerVisible = true" class="action-button"
						>编辑资料</a-button
					>
					<a-button v-if="hasPerm('bizPurposeDetailAddLinker')" @click="addPersonVisible = true" class="action-button"
						>新增联系人</a-button
					>
					<template v-if="route.query.type === '0'">
						<a-button
							v-if="hasPerm('bizPurposeDetailRecycle') && detailInfo.followUpStatus !== 2"
							@click="recoveryVisible = true"
							class="action-button"
							>回收公海</a-button
						>
						<a-button
							v-if="hasPerm('bizPurposeDetailConcerAdd')"
							@click="collaborateVisible = true"
							class="action-button"
							>添加协作人</a-button
						>
						<a-button v-if="hasPerm('bizPurposeDetailTransfer')" @click="transferVisible = true" class="action-button"
							>转让客户</a-button
						>
					</template>
				</a-space>
			</div>
			<div class="max-w-[400px] min-w-[220px]">
				<contact-list-section
					ref="contactListSectionRef"
					:detail-info="{ ...detailInfo, tagIdList, tagNameList }"
					:type="type"
				/>
			</div>
		</div>
	</a-card>
	<!-- tab切换展示区域 -->
	<a-card v-if="loading" class="mt-[20px]">
		<customer-tab
			ref="customerListTab"
			:info="detailInfo"
			type="PrivateSea"
			:getRecord="customerApi.getRecordList"
			:getPersonList="customerApi.getPersonList"
			:getCollaboratorList="customerApi.getCollaborateList"
		/>
	</a-card>
	<!-- 新增联系人弹窗 -->
	<person-modal
		v-if="addPersonVisible"
		v-model:visible="addPersonVisible"
		:customerCode="detailInfo.customerCode"
		@finished="addPersonDone"
	/>
	<!-- 添加跟进 -->
	<follow-modal
		v-if="followVisible"
		title="添加跟进"
		:type="1"
		v-model:visible="followVisible"
		:customerCode="detailInfo.customerCode"
		:personData="personData"
		@finished="followDone"
	/>
	<!-- 编辑资料 -->
	<customer-modal
		v-if="editCustomerVisible"
		type="edit"
		:info="detailInfo"
		v-model:visible="editCustomerVisible"
		:callBack="customerApi.updateCustomer"
		@finished="done"
	/>
	<!-- 回收公海 -->
	<recovery-modal
		v-if="recoveryVisible"
		v-model:visible="recoveryVisible"
		:list="[route.params.id]"
		@finished="router.back()"
	/>
	<!-- 添加协作人 -->
	<collaborate-modal
		v-if="collaborateVisible"
		v-model:visible="collaborateVisible"
		:customerCode="detailInfo.customerCode"
		:ownerId="detailInfo.ownerId"
		:getCollaboratorList="customerApi.getCollaborateList"
		@finished="onCollaborateDone"
	/>
	<!-- 转让客户 -->
	<transfer-modal
		v-if="transferVisible"
		v-model:visible="transferVisible"
		:customerCode="detailInfo.customerCode"
		@finished="onTransferDone"
	/>
</template>
<script setup>
	import customerModal from './customerModal.vue'
	import customerApi from '@/api/biz/customerApi'
	import claimApi from '@/api/biz/claimApi'
	import recoveryModal from './recoveryModal.vue'
	import personModal from './personModal.vue'
	import customerTab from './customerTab.vue'
	import followModal from '../claimList/followModal.vue'
	import collaborateModal from './collaborateModal.vue'
	import transferModal from './transferModal.vue'
	import useTabs from '@/utils/useTabs.js'
	import { useRoute, useRouter } from 'vue-router'
	import { followUpMap } from '../contractManagement/enum/contractEnum'
	import contactListSection from '@/components/modal/contactListSection.vue'
	import useTableFilter from '@/hook/useTableFilter'
	import StepSpace from '@/components/Space/StepSpace.vue'
	import { globalStore } from '@/store'

	const store = globalStore()

	const route = useRoute()
	const router = useRouter()
	const tableFilter = useTableFilter('customerManagementFilter')
	const filterData = tableFilter.get() || {}

	const type = ref(2) // 客户私海

	const detailInfo = ref({
		prevId: null,
		nextId: null
	})
	const loading = ref(false)
	onBeforeMount(() => {
		getData()
	})
	const personData = ref([])
	const result = ref(false)
	const getData = () => {
		customerApi.getCustomerDetail({ id: route.params.id, ...filterData }).then((res) => {
			if (res) {
				detailInfo.value = res
				loading.value = true
				const param = {
					code: detailInfo.value.customerCode
				}
				claimApi.getCompanyPersons(param).then((res) => {
					personData.value = res
				})

				nextTick(() => {
					contactListSectionRef.value.getPersons(detailInfo.value.customerCode)
				})

				getTagList()
			} else {
				result.value = true
			}
		})
	}

	const tagIdList = ref([])
	const tagNameList = ref([])
	const getTagList = () => {
		customerApi
			.getTagList({
				customerCode: detailInfo.value.customerCode
			})
			.then((res) => {
				const { labelId, labelName } = res
				if (labelName) {
					tagIdList.value = labelId.split(',')
					tagNameList.value = labelName.split(',')
				} else {
					tagIdList.value = []
					tagNameList.value = []
				}
			})
	}

	const customerListTab = ref(null)
	const addPersonDone = () => {
		if (customerListTab.value.radioValue === '3') {
			customerListTab.value.table.refresh(true)
		}
	}

	let addPersonVisible = ref(false)
	const followVisible = ref(false)
	const editCustomerVisible = ref(false)
	const recoveryVisible = ref(false)
	/**
	 * 编辑资料完成
	 */

	const done = () => {
		getData()
		followDone()
	}
	/**
	 * 跟进完成
	 */
	const followDone = () => {
		getData()
		customerListTab.value.getRecords()
	}

	/**
	 * 转让客户
	 */
	const collaborateVisible = ref(false)
	const onCollaborateDone = () => {
		if (customerListTab.value.radioValue === '4') {
			customerListTab.value.collaborateTable.refresh(true)
		}
		customerListTab.value.getRecords()
	}

	/**
	 * 转让客户
	 */
	const transferVisible = ref(false)
	const onTransferDone = () => {
		router.back()
	}

	/**
	 * 联系人列表拨打电话
	 */
	const contactListSectionRef = ref(null)

	/**
	 * 上一条/下一条
	 * @param id
	 */
	const onRefresh = (id) => {
		router.replace({
			path: `/biz/customerManagement/customerDetail/${id}`,
			query: { type: filterData.type }
		})
	}

	/**
	 * 打标签
	 */
	const onTagAdd = () => {
		store.tagShowTab = false
		store.tagNode?.open(detailInfo.value.customerCode, type.value, tagIdList.value)
	}

	const tagFinishStatus = computed(() => store.tagFinishStatus)
	watch(tagFinishStatus, (newVal, oldVal) => {
		if (newVal) {
			getTagList()
			customerListTab.value.getRecords()
		}
	})
</script>

<style lang="less" scoped>
	.company-title {
		font-size: 22px;
		font-weight: 500;
		color: #333333;
		line-height: 1;
	}

	.action-button {
		height: auto;
		margin-right: 12px;
		padding: 6px 24px;
		background: #ffffff;
		border: 1px solid #dadada;
		border-radius: 12px;
		& :deep(span) {
			font-weight: 500;
			font-size: 16px;
		}
	}
</style>
